<script setup lang="ts">
import Drawer from "../uni/uni-drawer/uni-drawer.vue";
import { useBasicInfoStore, useCharacterStore, useConfigStore } from "@/store";
import EqIcon from "./eq-icon.vue";
import { getRarityClass } from "@/utils";
import { PropType } from "vue";
import { Equip } from "@/api/info/type";

const props = defineProps({
  part: {
    type: String as PropType<
      | "上衣"
      | "下装"
      | "头肩"
      | "腰带"
      | "鞋"
      | "武器"
      | "手镯"
      | "项链"
      | "戒指"
      | "手镯"
      | "项链"
      | "戒指"
      | "公会勋章"
      | "团队模式勋章"
      | "冒险勋章"
      | "称号"
    >,
    default: "上衣",
  },
});

const emits = defineEmits(["confirm"]);

const showRight = ref(false);
const showRightRef = ref();
const currentTab = ref(0);

// 打开窗口
const showDrawer = () => {
  showRight.value = true;
  showRightRef.value.open();
};
// 关闭窗口
const closeDrawer = () => {
  showRightRef.value.close();
};

const char = useCharacterStore();
const config = useConfigStore();

onNavigationBarButtonTap(() => {
  if (showRight.value) {
    showRightRef.value.showRight.close();
  } else {
    showRightRef.value.open();
  }
});

onBackPress(() => {
  if (showRight.value) {
    showRightRef.value.close();
    return true;
  }
});

defineExpose({
  showDrawer,
});

const selectEqu = (eq: Equip) => {
  config.equips[props.part].id = eq.id;
};

const equips = computed(() =>
  char.equips
    .filter((a) => a.typeSon1Id == props.part || a.typeSon2Id == props.part)
    .sort((a, b) => {
      if (a.lv == b.lv) {
        return b.rarity.localeCompare(a.rarity);
      }
      return b.lv - a.lv;
    })
);

const emblems = computed(
  () =>
    char.emblems
      ?.filter((x) => x.typeSon2Id.split(",").includes(props.part))
      ?.sort((a, b) => b.lv - a.lv)
      ?.map((x) => ({
        text: `${x.lv.toString().padStart(2, "0")}级 ${x.name} `,
        value: x.id,
      })) ?? []
);

const enchants = computed(() => char.enchats
      ?.filter((a) => (a.typeSon2Id?.split(",") ?? []).includes(props.part))
      ?.map((x) => ({
        text: `[${x.name}]：${x.desc.replaceAll("<br>", "|")}`,
        value: x.id,
      })) ?? []
);


const curEqu = computed(a=>char.equips.find(x=>x.id == config.equips[props.part].id))

const seals = computed(() => {
  const part = ["上衣", "下装", "头肩", "腰带", "鞋"].includes(curEqu.value?.typeSon1Id ?? "") ? "防具" : curEqu.value?.typeSon1Id;
  return char.seal?.filter(a=>a.rarity.includes(curEqu.value?.rarity) && a.typeSon2Id.includes(part ?? '') && a.lv <= (curEqu.value?.lv ?? 0))?.map(x=>({text:x.name,value:x.id,type:x.typeSon1Id})) ?? []
})

watch(
  () => props.part,
  () => {
    currentTab.value = 0;
  }
);

const visable = computed(()=>showRightRef.value.visibleSync ?? false)

const curEquConfig = computed({
  get(){
    if(!config.equips[props.part]){
      config.equips[props.part] = {
        id:"",
        reinforce:0,
        enchant:"",
        emblems:[],
        seals:[]
    }}
    return config.equips[props.part]
  },
  set(val){
    config.equips[props.part] = val
  }
})
</script>

<template>
  <Drawer ref="showRightRef" class="showRight" mode="right" :mask-click="true">
    <view class="scroll-view">
      <view class="top">
        <view class="back" @click="closeDrawer"></view>
        <text class="pl-20rpx">当前部位：{{ props.part }}</text>
      </view>
      <view class="w-100% mt-10rpx flex justify-center items-center"
        ><form-switch v-model:value="currentTab" :tabs="['装备', '打造']"
      /></view>
      <scroll-view class="scroll-view-box" :scroll-y="true">
        <view v-if="currentTab == 0">
          <view
            class="flex equ-items"
            v-for="equ in equips"
            :key="equ.id"
            @click="selectEqu(equ)"
          >
            <view class="w-50px flex justify-center items-center">
              <EqIcon
                :eq="equ"
                :dressed="curEquConfig.id == equ.id"
              />
            </view>
            <view
              class="flex-1 mx-10rpx text-25rpx"
              :class="getRarityClass(equ.rarity ?? '')"
            >
              <view class="flex justify-between">
                <view class="flex">
                  <text class="text-hex-91f81d">{{ equ.lv }}级</text>
                </view>
                <text class="text-hex-ffff">{{ equ.typeSon2Id }}</text>
              </view>
              <view class="flex justify-between">
                {{ equ.name }}
              </view>
            </view>
          </view>
        </view>
        <view v-if="currentTab == 1">
          <!-- <text class="text-hex-ffe692 ml-2px">强化</text>
          <view class="titleLine"></view> -->
          <view
            v-if="
              !['称号', '公会勋章', '团队模式勋章', '冒险勋章'].includes(
                props.part
              )
            "
          >
            <uni-data-select
              v-model="curEquConfig.reinforce"
              style="width: 100%"
              dark
              :clear-icon="false"
              placeholder="请选择强化等级"
              :localdata="
                Array.from({ length: 21 }, (_, index) => {
                  return {
                    text: `强化 +${(20 - index).toString().padStart(2, '0')}`,
                    value: 20 - index,
                  };
                })
              "
            />
          </view>
          <view class="mt-20px">
            <uni-data-select
              v-model="curEquConfig.emblems[0]"
              class="w-100%"
              dark
              :clear-icon="false"
              placeholder="徽章：暂无"
              :localdata="emblems"
            />
          </view>
          <view
            class="mt-5px"
            v-if="
              !['称号', '公会勋章', '团队模式勋章', '冒险勋章'].includes(
                props.part
              )
            "
          >
            <uni-data-select
              v-model="curEquConfig.emblems[1]"
              style="width: 100%"
              dark
              :clear-icon="false"
              placeholder="徽章：暂无"
              :localdata="emblems"
            />
          </view>

          <view class="line" />

          <view class="mt-20px">
            <uni-data-select
              v-model="curEquConfig.enchant"
              style="width: 100%; margin-top: 10px"
              dark
              :clear-icon="false"
              placeholder="附魔"
              :localdata="enchants"
            />
          </view>

          <view class="line" />

          <view
            class="mt-20px"
            v-if="
              !['称号', '公会勋章', '团队模式勋章', '冒险勋章'].includes(
                props.part
              )
            "
          >
            <uni-data-select
              v-model="curEquConfig.seals[0]"
              style="width: 100%"
              dark
              :clear-icon="false"
              placeholder="特性属性"
              :localdata="
                seals
                  .filter((a) => a.type == '特性属性')
                  .map((a) => ({ text: `特性：${a.text}`, value: a.value }))
              "
            />
          </view>
          <view
            class="mt-5px"
            v-if="
              !['称号', '公会勋章', '团队模式勋章', '冒险勋章'].includes(
                props.part
              )
            "
          >
            <uni-data-select
              v-model="curEquConfig.seals[1]"
              style="width: 100%"
              dark
              :clear-icon="false"
              placeholder="普通属性"
              :localdata="
                seals
                  .filter((a) => a.type == '普通属性')
                  .map((a) => ({ text: `普通：${a.text}`, value: a.value }))
              "
            />
          </view>

          <view
            class="mt-5px"
            v-if="
              !['称号', '公会勋章', '团队模式勋章', '冒险勋章'].includes(
                props.part
              )
            "
          >
            <uni-data-select
              v-model="curEquConfig.seals[2]"
              style="width: 100%"
              dark
              :clear-icon="false"
              placeholder="普通属性"
              :localdata="
                seals
                  .filter((a) => a.type == '普通属性')
                  .map((a) => ({ text: `普通：${a.text}`, value: a.value }))
              "
            />
          </view>
        </view>
      </scroll-view>
    </view>
  </Drawer>
</template>

<style scoped lang="scss" src="./css/eq-color.scss"></style>

<style scoped lang="scss">
.showRight {
  .scroll-view {
    // background-color: #111;
    //border-left: 1px solid #FFF;
    box-shadow: -3px 0 5px #222;
    /* #ifndef APP-NVUE */
    width: 100%;
    height: 100%;
    /* #endif */
    flex: 1;

    .scroll-view-box {
      flex: 1;
      position: absolute;
      top: 130rpx;
      right: 0;
      bottom: 0rpx;
      left: 0;
      padding: 15rpx 0 10rpx 10rpx;
      width: calc(100% - 20rpx);

      .view-inner {
        padding-right: 30rpx;
      }

      .equ-items {
        // padding: 10rpx;
        margin: 5rpx;
        height: 85rpx;
        align-items: center;
        background-color: #1d170f;
        border: 2px solid #3e342a;
        border-radius: 8rpx;
        // justify-content: center;
      }
    }
  }

  .top {
    display: flex;
    background-color: rgba(0, 0, 0, 0.25);
    height: 60rpx;
    padding: 0 10rpx;
    align-items: center;
    color: #fef2be;
    font-weight: bold;

    .back {
      width: 50rpx;
      height: 55rpx;
      background: url("../img/GLBUI_Common_TopbarReturnBtn.png") no-repeat
        center;
      background-size: 45rpx auto;
    }
  }
}

.title {
  height: 30rpx;
  display: flex;
  align-items: center;
  margin: 10px 2px;
  color: #fef2be;
}

.titleLine {
  margin: 10px 2px;
  width: 100%;
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0)
  );
  height: 1px;
  position: relative;
}

.line {
  margin: 0 auto;
  height: 1.2px;
  width: 100%;
  background: -webkit-linear-gradient(
    left,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0) 100%
  );
}
.eq-item-box {
  width: 38px;
  height: 38px;
}
</style>
